<template>
  <div class="item" style="height: 90%; width: 100%" ref="container">
    <div id="BarChat" :style="{ width: '100%', height: '100%' }"></div>
  </div>

</template>

<script>
import request from "@/utils/request.js";
import * as echarts from "echarts";

export default {
  name: "BarChat",
  data() {
    return {
      chartInstance: null,
      echart: echarts,
      option: {},
      legendFontSize: 12, // 初始图例文字大小
      resizeTimer: null // 定时器
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.handleResizeEnd);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResizeEnd);
  },
  methods: {
    initChart() {
      this.chartInstance = this.echart.init(document.getElementById("BarChat"));
    },
    async getData() {
      await this.updateData();
    },
    updateData() {
      this.option = {
        xAxis: {
          data: ['烟感设备', '气感设备', '安全用电探测器', '压力变送器'],
          axisLine: {
            lineStyle: {
              color: "#ffffff",
            }
          },
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              var ret = "";//拼接加\n返回的类目项
              var maxLength = 4;//每项显示文字个数
              var valLength = value.length;//X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1)//如果类目项的文字大于5,
              {
                for (var i = 0; i < rowN; i++) {
                  var temp = "";//每次截取的字符串
                  var start = i * maxLength;//开始截取的位置
                  var end = start + maxLength;//结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#ffffff",
            }
          },
        },
        series: [
          {
            name: "在线",
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25],
            itemStyle: {color: '#91cc75'}
          },
          {
            name: "离线",
            type: 'bar',
            data: [26, 24, 18, 22, 23, 20, 27]
          }
        ],
        tooltip: {
          axisPointer: {
            type: "line", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
            snap: false, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
          },
          showContent: true, // 是否显示提示框浮层，默认显示
          triggerOn: "mousemove", // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
          confine: true, // 是否将 tooltip 框限制在图表的区域内
          backgroundColor: "#ffffff", // 提示框浮层的背景颜色
          padding: 15, // 提示框浮层内边距，单位px
          position: "left",
          textStyle: {
            color: "#000000", // 文字的颜色
            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
          },

        },
      }
      this.chartInstance.setOption(this.option, true);
    },
    handleResizeEnd() {
      clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.chartInstance.resize();
        this.legendFontSize = Math.max(Math.floor(this.chartInstance.getWidth() / 30), 10);
        this.updateData(); // 重新渲染 echarts 图表
      }, 100); // 设置延迟时间，500ms
    },
  },
};
</script>

<style scoped>
</style>
